<template>
  <Popup
    v-model="visible"
    :round="round"
    :close-on-click-overlay="false"
    :safe-area-inset-bottom="true"
    :transition-appear="true"
    :close-on-popstate="true"
    overlay-class="layer_wrap"
    @click-overlay="handleClose"
  >
    <div class="layer_inside">
      <!-- {{info}} -->
      <!-- <div style="color: red">{{ currentPatientInfo }}</div> -->

      <!-- 科室信息 -->
      <div class="dept" :style="deptStyle">
        <ScrollX>{{ deptInfo }}</ScrollX>
      </div>
      <!-- 患者信息 -->
      <div class="patient-info" :style="patientAreaStyle">
        <div v-if="hasPatientInfo" class="item patient-item current-patient">
          <div class="content-item">
            <span v-if="currentPatientInfo.orderNo" class="patient-orderNo">
              {{ currentPatientInfo.orderNo }}
            </span>
            <span class="patient-name">
              {{ currentPatientInfo.patientName || " " }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import { Popup } from "vant";
import { pxToVw } from "@/utils/common";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";

export default {
  name: "CallPatientBlood",
  componentName: "CallPatientBlood",

  components: {
    Popup,
    ScrollX,
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    checkList: {
      type: Number,
      default: 1,
    },
  },

  data() {
    return {
      round: true,
      processedData: null,
      currentPatientInfo: {},
    };
  },

  computed: {
    // 是否显示患者信息
    hasPatientInfo() {
      return this.info?.treatingAlert || false;
    },

    // 科室信息
    deptInfo() {
      const msgContent = this.processedData?.msgContent || {};
      const { registerObjNameKey = "registerObjName" } = this.info || {};

      switch (this.checkList) {
        case 1:
          return msgContent.deptName || "";
        case 2: {
          const patientInfo = this.currentPatientInfo || {};
          return (
            patientInfo[registerObjNameKey] || msgContent.registerObjName || ""
          );
        }
        case 3:
          return msgContent.treatmentRoomName || "";
        case 5:
          return this.info?.current?.content || "";
        default:
          return "";
      }
    },

    // 科室样式
    deptStyle() {
      const current = this.processedData?.current || {};
      const style = {};

      if (current.backgroundColor) {
        style.backgroundColor = current.backgroundColor;
      }
      if (current.color) {
        style.color = current.color;
      }
      if (current.fontSize) {
        style.fontSize = pxToVw(current.fontSize);
      }

      return style;
    },

    // 患者区域样式
    patientAreaStyle() {
      const current = this.processedData?.current || {};
      const style = {};

      if (current.patientNumberBackground) {
        style.backgroundColor = current.patientNumberBackground;
      }
      if (current.patientColor) {
        style.color = current.patientColor;
      }
      if (current.patientFontSize) {
        style.fontSize = pxToVw(current.patientFontSize);
      }

      return style;
    },
  },

  watch: {
    info: {
      handler: "processInfoData",
      immediate: false,
      deep: true,
    },
  },

  methods: {
    // 处理信息数据
    processInfoData() {
      try {
        if (!this.info) return;

        this.processedData = {
          ...this.info,
          ...this.info.data
        };
        const msgContent = this.processedData.msgContent || {};
        const { treatingPatientList = [], treatingPatient = {} } = msgContent;

        this.currentPatientInfo =
          treatingPatientList.length > 0
            ? treatingPatientList[0]
            : treatingPatient || {};
        console.log(this.info,this.currentPatientInfo,'this.currentPatientInfo');
      } catch (error) {
        console.error("处理数据失败:", error);
        this.processedData = null;
      }
    },

    // 关闭处理
    handleClose() {
      this.$emit("handleCancel");
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup--center {
  width: 900px;

  .layer_inside {
    overflow: hidden;
  }

  .dept {
    height: 250px;
    line-height: 250px;
    font-size: 150px;
  }

  .patient-info {
    height: 300px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-weight: 500;

    .patient-item {
      .content-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
    }
  }
}
</style>
